<template>
	<view class="page" :class="getThemeClass">
		<unavbar title="AI创作大赛">
			<template #barRight>
				<view  @click="goPage">大赛合作</view>
			</template>
		</unavbar>
		<!-- 发售日历   -->
		<view class="u-p-l-28 u-p-r-28">
			<view class="main-card u-m-t-20 pos-re" v-for="(item,index) in clendar" :key="index" @click="$u.route('/pages/my/calendar/calendar-detail',{id:item.id})">
				<!-- <view class="rili-tag text-default u-font-28 text-bold">即将开始 {{item.show_at}}</view> -->
				<!-- <view class="gap-50"></view> -->
				<image :src="'../../../static/images/img/22.png'" mode="aspectFill" class="rili-img"></image>
				<view class="v1">
					<view class="u-font-28 text-bold q1">{{item.name}}</view>
					<!-- <view class="text-tips u-m-t-28 u-font-26">限量{{item.num}}份</view> -->
					<view class="flex justify-between align-center u-m-t-14">
						<view class="flex align-center bg1" v-if="item.join_status == 1">
							<image :src="item.banner_list[0]" mode="aspectFill" class="rili-authorimg"></image>
							<view class="u-m-l-12 u-font-24 text-b1old">进行中</view>
						</view>
						<view class="flex align-center bg2" v-if="item.join_status == 50">
							<image src="/static/images/img/34.png" mode="aspectFill" class="rili-authorimg"></image>
							<view class="u-m-l-12 u-font-24 text-bol1d">已结束</view>
						</view>
						<!-- mode="aspectFill" class="rili-authorimg" -->
						<view class="rili-price u-font-24 u-flex justify-between align-center">
							<image src="/static/images/img/33.png" style="width:18rpx;height:20rpx" ></image> <text class="e1">|</text> 
							{{item.hot}}w
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="gap-50"></view>
		<u-toast ref="uToast" />
		<view class="page-bg"></view>
		
		<u-tabbar
		:list="tabbar" 
		:mid-button="true" 
		:border-top="false" 
		inactive-color="#798387"
		active-color="#CAFD5C"
		mid-button-size = "135"
		bg-color="#242424">
		</u-tabbar>
	</view>
</template>

<script>
	import artist from '../../../components/artist.vue'

	import {
		tabbar
	} from "@/common/tabbar.js"
	export default {
		components: {
			artist,
			// blindbox,
		},
		data() {
			return {
				show: false,

				tabbar: tabbar,
				clendar:[],
				token: uni.getStorageSync("token"),
				noticelist:[],
				listPages:0
			}
		},
		onShow() {
		},
		created() {
		},
		onLoad() {
			this.getHomedata(true)
			this.getHomedataTwo(true)
		},
		onPullDownRefresh() {
			this.getHomedata(true)
		},
		onReachBottom() {
			this.getHomedata(false)
		},
		methods: {
			getHomedataTwo(reset){
				if(reset){
					this.clendar = []
					this.listPages = 0
				}
				this.listPages += 1
				 this.$u.api.indexactivity({page: this.listPages,limist:10}).then(res => {
					this.clendar = [...this.featuredList,...res.data.data]; //精选系列
					uni.stopPullDownRefresh()
				}).catch(err => {})
			},
			getHomedata(reset) { //首页信息 接口
				if(reset){
					this.featuredList = []
					this.listPages = 0
				}
				this.listPages += 1
				this.$u.api.home_index({page: this.listPages}).then(res => {
					this.featuredList = [...this.featuredList,...res.data.data]; //精选系列
					uni.stopPullDownRefresh()
				}).catch(err => {})

			},
			// 跳转我的页面
			go_my() {
				uni.switchTab({
					url: '../mine/mine'
				})
			},
			searchbazaar(){
				uni.navigateTo({
					url:'/pages/tabbar/bazaar/bazaar'
				})
			},
			goBlogs(){
				uni.switchTab({
					url: '../blogs/blogs'
				})
				// '/pages/tabbar/blogs/blogs'
			},
			// 跳转我的NFT
			my_nft() {
				uni.navigateTo({
					url: '../../my/casting/casting'
				})
			},
			calendar(){
				uni.navigateTo({
					url:"../../my/calendar/calendar"
				})
			},
			gocompound(){
				uni.navigateTo({
					url:"/pages/market/compound/compound"
				})
			},
			goPage(){
				uni.navigateTo({
					url: '/pages/tabbar/home/dasaihezuo'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		// background-color: #FBF7F2;
		// background-image: url('../../../static/images/HomeBgimg.png');
		background-size: 750rpx 1624rpx;
		background-position: 0 0;
		background-repeat: no-repeat;
		/deep/ .u-navbar-fixed{
			// background-color: #FBF7F2 !important;
			background-color: transparent !important;
		}
	}
	.Searchbox{
		width: 470rpx;
		text-align:right
	}
	.Mutu{
		display: inline-block;
		width: 90rpx;
		height: 40rpx;
	}
	.home-notice{
		width: 100%;
		height: 51rpx;
		// border-radius: 16rpx;
		// padding: 5rpx 20rpx;
		background-color: #111926;
		// margin-bottom: 24rpx;
		.home-news{
			width: 201rpx;
			height: 51rpx;
			padding-right: 15rpx;
		}
		.home-noticeswi{
			width: 470rpx;
			height: 51rpx;
			flex: 1;
			background-color: #333333;
			.home-noticeswiitem{
				width: 100%;
				height: 51rpx;
				color: #FFFFFF;
				font-size: 22rpx;
				line-height: 51rpx;
				font-weight: normal;
				padding-left: 16rpx;
			}
		}
	}
	.scroll-view_H{
			white-space: nowrap;
			overflow: hidden;
			box-sizing: border-box;
		.scroll-view-item{
			width: fit-content;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			box-sizing: border-box;
			.home-card{
				width: 280rpx;
				height: 120rpx;
				border-radius: 14rpx;
				// padding: 0 20rpx;
				margin-right: 20rpx;
			}		
		}
	}
	.home-sdchange{
		width: 100%;
		height: 74rpx;
		border-radius: 10rpx;
		padding: 0 30rpx;
		color: #999999;
		position: relative;
		.sdchange_icon{
			position: absolute;
			top: -20rpx;
			left: 12rpx;
			.metaimg{
				width: 90rpx;
				height: 30rpx;
				padding-left: 15rpx;
			}
		}
		.sdchange_text{
			width: 50%;
			.text{
				font-size: 36rpx;
				font-weight: bold;
				color: #FFFFFF;
				padding-left: 15rpx;
			}
		}
		.sdchange_switch{
			//width: 50%;
			height: 54rpx;
			font-size: 22rpx;
			color: #fff;
			padding: 0 20rpx;
			border-radius: 30rpx;
			border:1px solid #fff;
			//background: linear-gradient(90deg, #ACF887 0%, #86F9AF 100%, #86F9AF 100%);
		}
	}
	
	.kong-top-box{
		padding: 35rpx 30rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		border-bottom: solid 1rpx;
		.kong-top-item{
			width: 100%;
			border-right: 1rpx solid;
			margin-right: 25rpx;
			&:last-child{
				border: none;
				margin-right: 0;
			}
		}
	}
	.kong-bottom-box{
		border-radius: 20rpx;
		position: relative;
		.u-flex-col{
		}
		.kong_text{
			color: #FFFFFF;
		}
		.cardimg{
			height: 180rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
	}
	
	.home-shop{
		width: 690rpx;
		margin: 0 30rpx 30rpx 30rpx;
		.home-shopimg{
			width: 330rpx;
			height: 172rpx;
			border-radius: 20rpx 20rpx 0 0;
		}
		.home-shopbot{
			width: 330rpx;
			height: 70rpx;
			padding: 0 20rpx;
			border-radius: 0 0 20rpx 20rpx;
			font-size: 26rpx;
			font-weight: bold;
			background-color: #FFFFFF;
		}
	}

	.utabs {
		border-radius: 10rpx;
		margin: 0 30rpx;
	}

	// .page-black {
	// 	background-color: #1E2020;
	// 	.status_barbox{
	// 		background-color: #1E2020 !important;
	// 	}
	// 	.text-area {
	// 		background-color: #1E2020;
	// 	}
	// 	.home-shopbot{
	// 		color: #FFFFFF !important;
	// 		background-color: #292B2B !important;
	// 	}

	// 	.title {
	// 		color: #fff;
	// 	}

	// 	.menu {
	// 		background-color: #292B2B;
	// 		color: #FFFFFF;
	// 	}

	// 	/deep/.u-tab-bar {
	// 		background-color: #FD8C46 !important;
	// 	}

	// 	.bot_btn {
	// 		background-color: #F7924C;
	// 	}
	// }

	.text-area {
		height: 136rpx;
		margin-bottom: 70rpx;
		// line-height: 136rpx;
		// border: 1px solid red;
		line-height: 6;
		text-align: center;
		position: -webkit-sticky;
		position: sticky;
		top: 0px;
		z-index: 99;
		background-color: #FAF6F4;
	}

	.u_search {
		width: 100% !important;
		position: relative;
		/deep/ .u-icon-wrap{
			position: absolute;
			right: 24rpx;
			.u-icon__img{
				width: 42rpx!important;
				height: 42rpx!important;
			}
		}
	}

	.title {
		font-size: 34rpx;
		color: #333333;
		margin-top: 102rpx;
		font-weight: bold;
	}

	.head_flex {
		display: flex;
		align-items: center;
		width: 100%;
		margin-top: 20rpx;

		.userAvatar {
			width: 70rpx;
			height: 70rpx;
			margin-right: 30rpx;
		}
	}

	.menu {
		background-color: #fff;
		margin: 0 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 34rpx 52rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #333333;

		.menu_item {
			width: 120rpx;
			text-align: center;
			image {
				margin-bottom: 22rpx;
				width: 70rpx;

			}
		}
	}
	.q1{
				font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 33rpx;
	}
	.bg1{
		background: #ff6169;
		border-radius: 35rpx;
		font-size: 24rpx;
		padding: 3px 8px;
		font-weight: normal;
	}
	.bg2{
		background: #5c5c5d;
		border-radius: 35rpx;
		font-size: 24rpx;
		padding: 3px 8px;
		font-weight: normal;
	}
	.v1{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		background: rgba(255,255,255,0.6);
		padding-left:34rpx;
		padding-right: 34rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	.main-card{		border-radius: 36rpx;
		border: 1px solid #252525;overflow: hidden; padding: 0;background: none;position: relative;}
	.bot_btn {
		margin: 88rpx 150rpx 0 150rpx;
		background-color: #764E39;
		border-radius: 50rpx;
		color: #fff;
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	// 开屏弹窗
	.start-opup-box{
		flex-direction: column;
		align-items: center;
		.start-img{
			width: 600rpx;
			height: 900rpx;
			border-radius: 10rpx;
		}
	}
	
	.rili-tag{
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 25rpx;
		background: linear-gradient(90deg, #04D5A3 0%, #00E2E2 100%);
		border-radius: 20rpx 8rpx 20rpx 8rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.rili-img{
		width: 100%;
		height: 526rpx;
	}
	.rili-authorimg{
		width: 22rpx;
		height: 22rpx;
		//border-radius: 50%;
	}
	.e1{
		display: block;
		color: rgba(255,255,255,0.2);
		margin-left: 5px;
		margin-right: 5px;
	}
	.rili-price{
		//font-size: 40rpx;
		//font-weight: bold;
	//	&::before{
		//	content: "￥";
		//	font-size: 26rpx;
		//}
		padding-left: 10px;
		padding-right:10px;
		box-sizing: border-box;
	
height: 40rpx;
border-radius: 6rpx 6rpx 6rpx 6rpx;
opacity: 1;
border: 2rpx solid rgba(255,255,255,0.2);
text-align: center;
line-height: 40rpx;
	}
	.two .active{
		font-size: 36rpx;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 42rpx;
		position: relative;
	}
	.two .active::after{
		content: '';
		width: 32rpx;
		height: 6rpx;
		background: #CAFD5C;
		border-radius: 72rpx;
		position: absolute;
		bottom: -10rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
	}
	.two text{
		font-size: 36rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255,255,255,0.6);
		line-height: 42rpx;
	}
	.two text:nth-child(1){margin-right:40rpx}
	.mySlos .my-goods-list{padding-left:0rpx;}
</style>
